<template>
  <div class="auth-menu">
    <template v-if="auth.isAuthenticated">
      <span class="user">{{ auth.user?.nickname || auth.user?.username }}</span>
      <button class="btn btn-danger" @click="logout">退出</button>
    </template>
    <template v-else>
      <router-link to="/login" class="btn btn-primary">登录</router-link>
    </template>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import http from '@/utils/http'
import { useUiStore } from '@/stores/ui'

const auth = useAuthStore()
const router = useRouter()
const ui = useUiStore()

async function logout() {
  try {
    await http.post('/auth/logout')
    auth.clearAuth()
    ui.showToast('已退出登录', 'success')
    router.replace('/login')
  } catch (e) {
    ui.showToast('退出失败', 'error')
  }
}
</script>

<style scoped>
.auth-menu { display: inline-flex; gap: 10px; align-items: center; }
.user { color: var(--color-muted); font-weight: 600; }
</style>